<template>
    <div class="mi-body">
        <div class="top-img">
            <img src="../../assets/img/头部.png" alt="">
        </div>
        <router-link :to="'/login'"><div class="mi-login">
            <img src="../../assets/img/切换.png" alt="">
        </div></router-link>
        <div class="mi-top">
            <div class="mi-img"><img src="../../assets/image/ndxz.jpg" alt=""></div>
            <span class="mi-name">你滴勋宗</span>
            <span class="mi-id">ID: 202010101550019</span>
            <div class="mi-line"></div>
            <div class="mi-foot">
                <div class="mi-item">
                    <span class="mi-text1">红包</span>
                    <span class="mi-text2">218</span>
                </div>
                <div class="mi-item">
                    <span class="mi-text1">优惠券</span>
                    <span class="mi-text2">12张</span>
                </div>
                <div class="mi-item">
                    <span class="mi-text1">鲜豆</span>
                    <span class="mi-text2">88</span>
                </div>
                <div class="mi-item">
                    <span class="mi-text1">白条</span>
                    <span class="mi-text2">100张</span>
                </div>
            </div>  
        </div>
       <div class="mi-bottom">
                <div class="mi-demo">
                    <div class="mi-left">
                        <img src="../../assets/img/我的-钱包.png" alt="">
                        <span class="mi-text3">我的钱包</span>
                    </div>
                    <div class="mi-right">
                        <img src="../../assets/img/箭头.png" alt="">
                    </div>
                </div>
                <router-link :to="'/address'">
                <div class="mi-demo">
                    <div class="mi-left">
                        <img src="../../assets/img/地址.png" alt="">
                        <span class="mi-text3">我的地址</span>
                    </div>
                    <div class="mi-right">
                        <img src="../../assets/img/箭头.png" alt="">
                    </div>
                </div>
                </router-link>
                <div class="mi-demo">
                    <div class="mi-left">
                        <img src="../../assets/img/客服.png" alt="">
                        <span class="mi-text3">客服与帮助</span>
                    </div>
                    <div class="mi-right">
                        <img src="../../assets/img/箭头.png" alt="">
                    </div>
                </div>
            </div> 
            <div class="item" >
            <router-link :to="'/home'"><div class="main"><img src="../../../public/img/sy.png">首页</div></router-link>
            <router-link :to="'/shoppingcart'"><div class="main"><img src="../../../public/img/gwc.png">购物车</div></router-link>
            <router-link :to="'/order'"><div class="main"><img src="../../../public/img/dd.png">订单</div></router-link>
            <router-link :to="'/mine'"><div class="main"><img src="../../../public/img/wd.png">我的</div></router-link>
      </div>
    </div>
    </template>
    <script>
    import {
    navData
  } from "@/untils/nav"
  export default{
    setup(){
        return{
            navData
        }
    }
  }
    </script>
    <style>
    .mi-login img{
        width: 30px;
        position: absolute;
        right: 20px;
        top: 50px;
    }
    .item{
    display: flex;
    justify-content: space-around;
    width: 100vw;
    padding: 10px;
    position: absolute;
    bottom: -40px;
    z-index: 999;
    background-color: #ddd;
  }
.item .main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
 .item a{
    color: rgb(13, 189, 233);
    text-decoration: none;
    font-size: 9px;
  }
  .item img{
    width: 25px;
  }
    .top-img img{
        width: 100vw;
    }
    .mi-top{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 80px;
        margin-left: 30px;
        border-radius: 20px;
        box-shadow: 5px 5px 5px 5px  #c1c0c9;
    }
    .mi-img img{
        width: 90px;
        border-radius: 50px;
    }
    .mi-name{
        font-size: 24px;
        margin-top: 20px;
    }
    .mi-id{
        font-size: 14px;
        color: #c1c0c9;
    }
    .mi-line{
        width: 100%;
        height: 1px;
        background-color: aliceblue;
    }
    .mi-foot{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .mi-item{
        display: flex;
        flex-direction: column ;
        justify-content: center;
        align-items: center;
    }
    .mi-text1{
        font-size: 12px;
        color: #c1c0c9;
    }
    .mi-text2{
        font-size: 20px;
    }
    .mi-bottom{
        border-radius: 20px;
        box-shadow: 5px 5px 5px 5px #c1c0c9;
        margin-left: 30px;
        margin-top: 20px;
    }
    .mi-demo{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        margin-left: 10px;
        margin-top: 10px;
    }
    .mi-demo img{
        width: 30px;
    }
    .mi-left{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    a{
        text-decoration: none;
        color: black;
    }
    </style>